<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Vue.js tree view example</title>
    <style>
        body {
            font-family: Menlo, Consolas, monospace;
            color: #444;
        }
        
        .item {
            cursor: pointer;
        }
        
        .bold {
            font-weight: bold;
        }
        
        ul {
            padding-left: 1em;
            line-height: 1.5em;
            list-style-type: dot;
        }
    </style>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../dist/vue.min.js"></script>
</head>

<body>

    <!-- item template -->
    <script type="text/x-template" id="item-template">
        <li>
            <div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType">
                {{model.name}}
                <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
            </div>
            <ul v-show="open" v-if="isFolder">
                <item class="item" v-for="model in model.children" :model="model">
                </item>
                <li class="add" @click="addChild">+</li>
            </ul>
        </li>
    </script>

    <p>(You can double click on an item to turn it into a folder.)</p>

    <!-- the demo root element -->
    <ul id="demo">
        <item class="item" :model="treeData">
        </item>
    </ul>

    <!-- demo code -->
    <script src="tree.js"></script>
</body>

</html>